<html>
  <head>
    <meta charset="utf-8" />
    <title>SCU-MES-KBN</title>
    <script src="./static/jquery.min.js"></script>
    <script src="./static/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./static/index.css" />
    <link rel="stylesheet" type="text/css" href="./static/element/index.css" />
  </head>
  <body>
    <style>
      .logo {
        background-image: url(./static/images/jctc.png);
      }
      .el-progress-bar__innerText {
        color: #333333;
        font-weight: bold;
        font-size: 0.8rem;
      }
      .notice-box {
        display: inline-block;
        text-align: right;
        padding-left: 100%;
        margin-top: -0.4rem;
      }
      .notice-content {
        color: yellow;
        white-space: nowrap;
        word-break: keep-all;
      }
      .card-table {
        width: 100%;
        table-layout: fixed;
        word-break: break-all;
        border-collapse: collapse;
      }
      .card-table th {
        color: #ffffff;
        font-size: 0.8rem;
        padding-bottom: 0.4rem;
      }
      .card-table td {
        color: #ffffff;
        text-align: center;
        padding: 0.4rem;
      }
      .card-machine {
        width: 100%;
        height: 2.4rem;
        overflow: hidden;
      }
      .card-machine .m-title {
        line-height: 1.2rem;
        font-size: 0.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .card-machine .m-desc {
        line-height: 1.2rem;
        font-size: 0.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .nowrap {
        overflow: hidden;
        white-space: nowrap;
      }
      .status-color-0 {
        color: #909399;
      }
      .status-color-1 {
        color: #67c23a;
      }
      .status-color-2 {
        color: #e6a23c;
      }
      .status-color-3 {
        color: #409eff;
      }
      .status-color-4 {
        color: #f56c6c;
      }
      .status-bg-0 {
        background: #909399;
      }
      .status-bg-1 {
        background: #67c23a;
      }
      .status-bg-2 {
        background: #e6a23c;
      }
      .status-bg-3 {
        background: #409eff;
      }
      .status-bg-4 {
        background: #f56c6c;
      }
      .badge {
        border-radius: 5px;
        min-width: 1.6rem;
        min-height: 0.8rem;
      }
      @keyframes u-loop-animation {
        0% {
          transform: translate3d(0, 0, 0);
        }

        100% {
          transform: translate3d(-100%, 0, 0);
        }
      }
    </style>
    <div class="canvas" style="opacity: 0.2;">
      <!-- <iframe frameborder="0" src="./background.html" style="width: 100%; height: 100%;"></iframe> -->
    </div>
    <div id="app" class="kanban">
      <div class="logo"></div>
      <div class="now-time"><span>{{showData.today}}</span></div>
      <el-dialog title="请选择要显示的事业部" :visible.sync="dialogVisible" width="60%">
        <el-button
          style="margin-bottom: 0.8rem;"
          v-for="(d,i) in orglist"
          :key="i"
          @click.prevent="chooseOrg(d)"
          type="primary"
          plain
        >
          {{d.plant_name}}
        </el-button>
      </el-dialog>
      <div class="main">
        <div class="header">
          <h1 @click="selectOrg">{{orgName}}&nbsp;{{kanbanTitle}}</h1>
        </div>
        <div class="notice" style="display: none;">
          <div class="notice-box">
            <span class="notice-content">{{showData.notice}} </span>
          </div>
        </div>
        <div class="bar">
          <div class="bar-row">
            <div class="barbox">
              <ul class="clearfix">
                <li class="pull-left title">当月工单目标总量</li>
                <li class="pull-left title">当月成型产出总量</li>
              </ul>
              <ul class="clearfix" style="color:#00dd21;">
                <li class="pull-left counter">{{showData.summary.qtyA}}</li>
                <li class="pull-left counter">{{showData.summary.qtyB}}</li>
              </ul>
            </div>
            <div class="barbox">
              <ul class="clearfix">
                <li class="pull-left title">当日成型工单目标总量</li>
                <li class="pull-left title">当日成型产出总量</li>
              </ul>
              <ul class="clearfix" style="color:#FFB800;">
                <li class="pull-left counter">{{showData.summary.qtyC}}</li>
                <li class="pull-left counter">{{showData.summary.qtyD}}</li>
              </ul>
            </div>
            <div class="barbox">
              <ul class="clearfix">
                <li class="pull-left title">当月工单制令总数</li>
                <li class="pull-left title">当月未结工单制令总数</li>
              </ul>
              <ul class="clearfix" style="color:#C1232B;">
                <li class="pull-left counter">{{showData.summary.qtyE}}</li>
                <li class="pull-left counter">{{showData.summary.qtyF}}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="content" style="height: calc(100% - 10.3rem)">
          <div style="width: 66%; height: 100%;padding-right:0.4rem;float: left;">
            <div class="boxall">
              <div class="alltitle">制令进度汇总</div>
              <div class="allnav" id="table1">
                <el-table :data="showData.lineData" style="width: 100%" height="100%" stripe>
                  <el-table-column prop="mo_no" label="制令单" :width="7*remPx"> </el-table-column>
                  <el-table-column label="产品">
                    <template slot-scope="scope">
                      <div>{{scope.row.sku_no}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="机台" :width="5*remPx">
                    <template slot-scope="scope">
                      <span v-for="(m,i) in scope.row.machines"><br v-if="i>0" />{{m}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="计划开始" :width="5.6*remPx">
                    <template slot-scope="scope">
                      <span>{{ scope.row.mo_plan_time | datestring }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="计划结束" :width="5.6*remPx">
                    <template slot-scope="scope">
                      <span>{{ scope.row.mo_target_time | datestring }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="target_qty" label="制令数" :width="4.8*remPx"> </el-table-column>
                  <el-table-column prop="input_qty" label="产出" :width="4.8*remPx"> </el-table-column>
                  <el-table-column prop="output_qty" label="全检" :width="4.8*remPx"> </el-table-column>
                  <el-table-column label="达成率" :width="5*remPx">
                    <template slot-scope="scope">
                      <el-progress
                        :stroke-width="1.2 * remPx"
                        :text-inside="true"
                        :status="calStatus(scope.row.output_rate)"
                        :percentage="scope.row.output_rate"
                      ></el-progress>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="boxfoot"></div>
            </div>
          </div>
          <div style="width: 34%; height: 100%; padding-left:0.4rem;float: left;">
            <div style="height:50%;padding-bottom: 0.4rem;">
              <div class="boxall" id="wipbox">
                <div class="alltitle">机台状态</div>
                <div class="allnav" id="table2">
                  <table class="card-table">
                    <thead>
                      <tr>
                        <th width="100%" colspan="3">
                          <div
                            v-for="i in showData.machineData.summary"
                            :key="i.machine_status"
                            style="display: inline-block;"
                          >
                            <span :class="'status-color-'+i.machine_status">{{i.status_name}}</span>
                            <div style="display: inline-block;" class="badge" :class="'status-bg-'+i.machine_status">
                              {{i.qty}}
                            </div>
                            <div style="width:1rem;display: inline-block;"></div>
                          </div>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(children,ind) in showData.machineData.detail" :key="ind">
                        <td width="33%" v-for="(item,index) in children" :key="index">
                          <div class="card-machine badge" :class="'status-bg-'+item.machine_status">
                            <div class="m-title">{{item.machine_code}}</div>
                            <div class="m-desc">{{item.machine_name}}</div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="boxfoot"></div>
              </div>
            </div>
            <div style="height:50%;padding-top: 0.4rem;">
              <div class="boxall">
                <div class="alltitle">模具状态</div>
                <div class="allnav" id="table3">
                  <table class="card-table">
                    <thead>
                      <tr>
                        <th width="100%" colspan="3">
                          <div
                            v-for="i in showData.toolingData.summary"
                            :key="i.tooling_status"
                            style="display: inline-block;"
                          >
                            <span :class="'status-color-'+i.tooling_status">{{i.status_name}}</span>
                            <div style="display: inline-block;" class="badge" :class="'status-bg-'+i.tooling_status">
                              {{i.qty}}
                            </div>
                            <div style="width:1rem;display: inline-block;"></div>
                          </div>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(children,ind) in showData.toolingData.detail" :key="ind">
                        <td width="33%" v-for="(item,index) in children" :key="index">
                          <div class="card-machine badge" :class="'status-bg-'+item.tooling_status">
                            <div class="m-title">{{item.tooling_id}}</div>
                            <div class="m-desc">{{item.tooling_name}}</div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="boxfoot"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="footer">合肥智慧云上信息技术有限公司 技术支持</div>
      </div>
    </div>
  </body>

  <script src="./static/lodash.min.js"></script>
  <script src="./static/dayjs.js"></script>
  <script src="./static/element/index.js"></script>
  <script src="./static/echarts/echarts.min.js"></script>
  <script src="./static/echarts/my-echarts-theme.js"></script>
  <script>
    var URL = 'http://' + location.hostname + ':8080/mes_api'
    // URL = 'http://47.100.246.49:8090/mes_api'

    var storageKey = 'kanban_default_plant'

    //根据窗口宽度动态设置根节点的字体大小
    var remPx = 12
    function setRem() {
      var html = document.getElementsByTagName('html')[0]
      var oWidth = document.body.clientWidth || document.documentElement.clientWidth
      remPx = parseInt(oWidth / 80)
      html.style.fontSize = remPx + 'px'
    }
    setRem()

    var scrolls = {}
    function tableScroll(id, t) {
      if (!t) t = 2500
      if (scrolls[id]) clearTimeout(scrolls[id])
      var box = $('#' + id + ' .el-table__body-wrapper.is-scrolling-none')
      var table = $('#' + id + ' .el-table__body-wrapper.is-scrolling-none table')
      if (!box || !table) return
      var h = box.height() - table.height()
      if (h < 0) {
        box.css('overflow', 'hidden')
        var tbody = $('#' + id + ' .el-table__body-wrapper.is-scrolling-none tbody')
        var row = $('#' + id + ' .el-table__body-wrapper.is-scrolling-none tr:first')
        tbody.append(row)
        scrolls[id] = setTimeout(function() {
          tableScroll(id)
        }, t)
      }
    }

    function tableScroll2(id, t) {
      if (!t) t = 2500
      if (scrolls[id]) clearTimeout(scrolls[id])
      var box = $('#' + id)
      var table = $('#' + id + ' table')
      if (!box || !table) return
      var h = box.height() - table.height()
      if (h < 0) {
        box.css('overflow', 'hidden')
        var tbody = $('#' + id + ' table tbody')
        var row = $('#' + id + ' table tbody tr:first')
        tbody.append(row)
        scrolls[id] = setTimeout(function() {
          tableScroll2(id)
        }, t)
      }
    }

    //窗口大小变化监听
    window.onresize = function() {
      setRem()
    }

    Vue.filter('datestring', function(value) {
      return value.substr(0, 10)
    })

    var app = new Vue({
      el: '#app',
      data: function() {
        return {
          URL: URL,
          remPx: remPx, //根字体大小px
          dialogVisible: false,
          orgId: '', //组织ID 暂时用不到
          orgName: '', //组织名称
          kanbanTitle: '数据展示平台',
          timer: null, //拉取数据定时器
          timerScroll: null, //表格滚动定时器
          showData: {
            today: '2020-01-01 12:00',
            summary: {
              qtyA: 0,
              qtyB: 0,
              qtyC: 0,
              qtyD: 0,
              qtyE: 0,
              qtyF: 0
            },
            lineData: [],
            machineData: {
              detail: [],
              summary: []
            },
            toolingData: {
              detail: [],
              summary: []
            },
            notice: ''
          },
          orglist: []
        }
      },
      methods: {
        selectOrg: function() {
          //打开组织选择框
          this.dialogVisible = true
        },
        chooseOrg: function(d) {
          this.orgName = d.plant_name
          this.orgId = d.id
          localStorage.setItem(storageKey, JSON.stringify(d))
          this.refreshData()
          this.dialogVisible = false
        },
        refreshData: function() {
          var that = this
          clearTimeout(this.timer) //清除定时器
          //获取时间
          $.ajax(URL + '/platform/time/sync', {
            type: 'get',
            success: function(r) {
              that.showData.today = r ? r : ''
            }
          })
          $.ajax(URL + '/kbn/quaility/matforbid/getlist', {
            type: 'get',
            data: { plant: that.orgId },
            success: function(r) {
              if (r.status && r.length > 0) {
                that.showData.notice = r
                $('.kanban .notice').css('display', 'block')
                $('.kanban .content').height('calc(100% - 11.3rem)')
                var t = parseInt(r.length / 15) + 10
                $('.kanban .notice-box').css('animation', 'u-loop-animation ' + t + 's linear infinite both')
              } else {
                $('.kanban .notice').css('display', 'none')
                $('.kanban .content').height('calc(100% - 10.3rem)')
              }
            }
          })
          $.ajax(URL + '/kbn/output/mo/summary/getlist', {
            type: 'get',
            data: { plant: that.orgId },
            success: function(r) {
              if (r.status) {
                that.showData.summary = {
                  qtyA: r.total_target,
                  qtyB: r.total_output,
                  qtyC: r.datas[1].daily_target,
                  qtyD: r.datas[1].daily_output,
                  qtyE: r.datas[2].total_mo_count,
                  qtyF: r.datas[2].unfinished_mo_count
                }
              }
            }
          })
          $.ajax(URL + '/kbn/output/momachine/summary/getlist', {
            type: 'get',
            data: { plant: that.orgId },
            success: function(r) {
              if (r.status) {
                that.showData.lineData = r.datas
                that.showData.lineData.push({
                  mo_no: 'MO2002150033',
                  sku_no: '12001B00-11P-HF',
                  sku_name: 'PH2.0WAFER 主体',
                  target_qty: 100000,
                  output_qty: 0,
                  input_qty: 0,
                  mo_status: '3',
                  mo_plan_time: '2020-08-20 00:00:00',
                  mo_target_time: '2020-09-09 00:00:00',
                  output_rate: '0.00',
                  machines: []
                })
                that.showData.lineData.push({
                  mo_no: 'MO2002150033',
                  sku_no: '12001B00-11P-HF',
                  sku_name: 'PH2.0WAFER 主体',
                  target_qty: 100000,
                  output_qty: 0,
                  input_qty: 0,
                  mo_status: '3',
                  mo_plan_time: '2020-08-20 00:00:00',
                  mo_target_time: '2020-09-09 00:00:00',
                  output_rate: '0.00',
                  machines: []
                })
                that.showData.lineData.push({
                  mo_no: 'MO2002150033',
                  sku_no: '12001B00-11P-HF',
                  sku_name: 'PH2.0WAFER 主体',
                  target_qty: 100000,
                  output_qty: 0,
                  input_qty: 0,
                  mo_status: '3',
                  mo_plan_time: '2020-08-20 00:00:00',
                  mo_target_time: '2020-09-09 00:00:00',
                  output_rate: '0.00',
                  machines: []
                })
                that.showData.lineData.push({
                  mo_no: 'MO2002150033',
                  sku_no: '12001B00-11P-HF',
                  sku_name: 'PH2.0WAFER 主体',
                  target_qty: 100000,
                  output_qty: 0,
                  input_qty: 0,
                  mo_status: '3',
                  mo_plan_time: '2020-08-20 00:00:00',
                  mo_target_time: '2020-09-09 00:00:00',
                  output_rate: '0.00',
                  machines: []
                })
                that.showData.lineData.push({
                  mo_no: 'MO2002150033',
                  sku_no: '12001B00-11P-HF',
                  sku_name: 'PH2.0WAFER 主体',
                  target_qty: 100000,
                  output_qty: 0,
                  input_qty: 0,
                  mo_status: '3',
                  mo_plan_time: '2020-08-20 00:00:00',
                  mo_target_time: '2020-09-09 00:00:00',
                  output_rate: '0.00',
                  machines: []
                })
                that.showData.lineData.push({
                  mo_no: 'MO2002150033',
                  sku_no: '12001B00-11P-HF',
                  sku_name: 'PH2.0WAFER 主体',
                  target_qty: 100000,
                  output_qty: 0,
                  input_qty: 0,
                  mo_status: '3',
                  mo_plan_time: '2020-08-20 00:00:00',
                  mo_target_time: '2020-09-09 00:00:00',
                  output_rate: '0.00',
                  machines: []
                })
                that.showData.lineData.push({
                  mo_no: 'MO2002150033',
                  sku_no: '12001B00-11P-HF',
                  sku_name: 'PH2.0WAFER 主体',
                  target_qty: 100000,
                  output_qty: 0,
                  input_qty: 0,
                  mo_status: '3',
                  mo_plan_time: '2020-08-20 00:00:00',
                  mo_target_time: '2020-09-09 00:00:00',
                  output_rate: '0.00',
                  machines: []
                })
                that.showData.lineData.push({
                  mo_no: 'MO2002150033',
                  sku_no: '12001B00-11P-HF',
                  sku_name: 'PH2.0WAFER 主体',
                  target_qty: 100000,
                  output_qty: 0,
                  input_qty: 0,
                  mo_status: '3',
                  mo_plan_time: '2020-08-20 00:00:00',
                  mo_target_time: '2020-09-09 00:00:00',
                  output_rate: '0.00',
                  machines: []
                })
                setTimeout(function() {
                  tableScroll('table1')
                }, 1500)
              }
            }
          })
          $.ajax(URL + '/kbn/machine/status/summary/getlist', {
            type: 'get',
            data: { plant: that.orgId },
            success: function(r) {
              if (r.status) {
                that.showData.machineData.detail = _.chunk(r.detail, 3)
                that.showData.machineData.summary = r.datas[1].summary
                that.showData.machineData.detail.push([
                  {
                    machine_code: 'CXEQP006',
                    machine_name: '成型001',
                    machine_status: '0'
                  },
                  {
                    machine_code: 'CXEQP005',
                    machine_name: '成型001',
                    machine_status: '1'
                  },
                  {
                    machine_code: 'CXEQP005',
                    machine_name: '成型001',
                    machine_status: '1'
                  }
                ])
                that.showData.machineData.detail.push([
                  {
                    machine_code: 'CXEQP007',
                    machine_name: '成型001',
                    machine_status: '2'
                  },
                  {
                    machine_code: 'CXEQP008',
                    machine_name: '成型001',
                    machine_status: '3'
                  },
                  {
                    machine_code: 'CXEQP005',
                    machine_name: '成型001',
                    machine_status: '1'
                  }
                ])
                that.showData.machineData.detail.push([
                  {
                    machine_code: 'CXEQP009',
                    machine_name: '成型001',
                    machine_status: '2'
                  },
                  {
                    machine_code: 'CXEQP010',
                    machine_name: '成型001',
                    machine_status: '0'
                  },
                  {
                    machine_code: 'CXEQP005',
                    machine_name: '成型001',
                    machine_status: '1'
                  }
                ])
              }
              setTimeout(function() {
                tableScroll2('table2')
              }, 1500)
            }
          })
          $.ajax(URL + '/kbn/tooling/status/summary/getlist', {
            type: 'get',
            data: { plant: that.orgId },
            success: function(r) {
              if (r.status) {
                that.showData.toolingData.detail = _.chunk(r.detail, 3)
                that.showData.toolingData.summary = r.datas[1].summary
              }
            }
          })
          //数据拉取请求全部发起完成
          this.timer = setTimeout(this.refreshData, 60000) //再拉取定时器
        },
        calStatus: function(v) {
          if (v < 25) return 'exception'
          if (v < 50) return 'warning'
          if (v < 75) return ''
          return 'success'
        }
      },
      mounted: function() {
        var that = this
        //获取线别列表
        $.get(URL + '/kbn/plant/getlist?size=100&page=1', {}, function(r) {
          that.orglist = r.list
        })
        //获取缓存默认的ORG数据
        var org = localStorage.getItem(storageKey)
        if (org) {
          org = JSON.parse(org)
          that.orgId = org.id
          that.orgName = org.plant_name
          //启动拉取数据
          that.refreshData()
        } else {
          //打开组织选择框
          this.dialogVisible = true
        }
      }
    })
  </script>
</html>
